<template>
    <div class="product_detail">
        <div class="product_detail_scroll">
            <!-- 顶部 -->
            <div class="header">

                <van-nav-bar title="补样详情" left-arrow @click-left="handleLeft">
                </van-nav-bar>
            </div>

            <!-- 商品详情 -->
            <div class="product_detail_top" id="product_detail_top">
                <!-- 轮播 -->
                <div class="product_detail_top_img">
                    <van-swipe lazy-render ref="ticketSwiper" v-if="realSrcList.length">
                        <van-swipe-item v-for="(image, index) in realSrcList" :key="image">
                            <van-image class="product_detail_top-image"
                                :src="image + '?x-oss-process=image/resize,w_300'"
                                @click="enlargeImage(realSrcList, index)" fit="cover" />
                        </van-swipe-item>
                        <template #indicator="{ active, total }">
                            <div class="hmshop-custom-indicator fl-box-center">{{ active + 1 }}/{{ total }}</div>
                        </template>
                    </van-swipe>
                    <van-image :src="errImg" v-if="!realSrcList.length"> </van-image>

                    <!-- 轮播多机制 -->
                    <div v-if="hmMechanismsList1.cooperationMode" class="mechanism_mall">
                    </div>

                    <!-- 库存 -->
                    <!-- <div class="stock_box">
                        <div>库存</div>
                        <div class="line" />
                        <div>{{ Number(detailInfo.stockInfo?.stockAvailable) || 0 }}件/{{
                            Number(detailInfo.stockInfo?.stockTotal) ||
                            0 }}件</div>
                    </div> -->
                </div>
                <div class="product_detail_top_details">

                    <div class="product_stylename">
                        <div class="product_mechanism" v-if="hmMechanismsList1?.cooperationMode">多机制</div>
                        <div class="styleName text-el">{{ detailInfo.styleName }}</div>
                    </div>

                    <!-- 库存编码69 -->
                    <div class="product_box " v-if="detailInfo.stockCode || detailInfo.styleCode">
                        <div class="product_fl_box">
                            <div class="box_l" v-if="detailInfo.stockCode">

                                <div class="l_title"><span>库存编码</span></div>
                                <div class="l_code text-el ">{{ detailInfo.stockCode }}</div>
                                <div class="l_copy" @click="copyClick(detailInfo.stockCode)"></div>
                            </div>
                            <div class="box_r" v-if="detailInfo.styleCode">
                                {{ detailInfo.styleCode }}
                                <div class="icon_69"></div>
                            </div>

                        </div>
                    </div>


                    <!-- 类目、品牌     -->
                    <div class="product_ppbox">
                        <div class="pp_item" v-if="detailInfo.productCategoryName"
                            v-for="item in detailInfo.productCategoryName.split(',')" :key="item">{{ item }}</div>
                        <div class="pp_item" v-if="detailInfo.brandName" v-for="item in detailInfo.brandName.split(',')"
                            :key="item">{{
                                item }}</div>
                        <div class="pp_item" v-if="detailInfo.recruiter">{{ detailInfo.recruiter }}</div>
                    </div>

                    <!-- 供应商 -->
                    <div class="product_gysbox">
                        <div class="gys_l">
                            <div class="gys_img"></div> <span> 供应商：{{ detailInfo.supplierName }}</span>
                        </div>

                        <div class="gys_c"
                            :class="{ style_y: detailInfo?.sellStatus == '1', style_n: detailInfo?.sellStatus == '0' }">
                            {{ detailInfo?.sellStatus == '0' ? '未签署' : '已签署' }}</div>
                        <!-- <div class="gys_c">有AB货</div> -->
                    </div>

                    <!-- 商品状态、库存状态、货架号 -->
                    <div class="product_ztbox">
                        <div class="product_users_item">
                            <div class="product_users_title">库存数量</div>
                            <div class="product_users_text">{{ detailInfo.stockAvailable || 0 }}</div>
                        </div>
                        <div class="line"></div>
                        <div class="product_users_item">
                            <div class="product_users_title">库存状态</div>
                            <div class="product_users_text">{{ shelvesStatusNameByIdss(detailInfo.shelvesStatus) }}
                            </div>
                        </div>
                        <div class="line"></div>
                        <div class="product_users_item">
                            <div class="product_users_title">货架号</div>
                            <div class="product_users_text">{{ detailInfo?.locationName || '--' }} </div>
                        </div>
                    </div>

                    <!-- 商品编码 -->
                    <div class="product_id  ">
                        <div class="produc_left  ">
                            <span>商品编码</span>
                            <span>{{ detailInfo.productId }}</span>
                            <span class="copy" @click="copyClick(detailInfo.productId)"></span>
                        </div>
                        <div class="coreName " v-if="detailInfo.coreName">
                            <!-- <div class="goods_r_l">{{ detailInfo.liveType }}</div> -->
                            <div class="goods_r_r">{{ detailInfo.coreName }}</div>
                        </div>
                    </div>

                    <!-- 规格、材质 -->
                    <div class="product_ggbox">
                        <div class="ggimg"> </div>
                        <div>规格/材质：{{ detailInfo.specs }}</div>
                    </div>
                    <div class="product_ggbox">
                        <div class="qunimg"> </div>
                        <div>对接群名：{{ detailInfo.groupName }}</div>
                    </div>

                    <span class="tilte" v-if="detailInfo.tradeMode == '进口'">进口货物/原材料报关单</span>
                    <div class="product_image" v-if="detailInfo.tradeMode == '进口'">
                        <IsImgPdf v-for="(item, index) in customsDeclarationImageList" :key="index"
                            v-if="customsDeclarationImageList.length" :url="item" />
                        <div v-if="!customsDeclarationImageList.length">
                            <IsImgPdf url="" />
                        </div>
                    </div>
                    <span class="tilte" v-if="detailInfo.tradeMode == '进口'">进口产品备案材料</span>
                    <div class="product_image" v-if="detailInfo.tradeMode == '进口'">
                        <IsImgPdf v-for="(item, index) in customsInformationImageList" :key="index"
                            v-if="customsInformationImageList.length" :url="item" />
                        <div v-if="!customsInformationImageList.length">
                            <IsImgPdf url="" />
                        </div>
                    </div>
                    <span class="tilte" v-if="detailInfo.tradeMode == '进口'">进口产品原材料检验检疫证明</span>
                    <div class="product_image" v-if="detailInfo.tradeMode == '进口'">
                        <IsImgPdf v-for="(item, index) in customsInspectionImageList" :key="index"
                            v-if="customsInspectionImageList.length" :url="item" />
                        <div v-if="!customsInspectionImageList.length">
                            <IsImgPdf url="" />
                        </div>
                    </div>
                    <span class="tilte" v-if="detailInfo.tradeMode == '进口'">检测报告</span>
                    <div class="product_image" v-if="detailInfo.tradeMode == '进口'">
                        <IsImgPdf v-for="(item, index) in customsTestReportImgaeList" :key="index"
                            v-if="customsTestReportImgaeList.length" :url="item" />
                        <div v-if="!customsTestReportImgaeList.length">
                            <IsImgPdf url="" />
                        </div>
                    </div>
                </div>
            </div>

            <!-- 机制 -->
            <div class="mechanism_area" id="product_detail_jizhi">
                <mechanismCardNew :data="detailInfo.hmStockMechanismsList"></mechanismCardNew>
            </div>

            <!-- 补样信息 -->
            <div class="mechanism_area" id="product_detail_supplement">
                <messageBox title="补样信息">
                    <template #sampleStatus>
                        <div :class="{ title_tag: true, ...isStatusColour(detailInfo.sampleStatusName) }">
                            {{ detailInfo.sampleStatusName }}
                        </div>
                    </template>
                    <div class="pop_xhibit">
                        <div class="pop_xhibit_item">
                            <div class="pop_label">邀约人：</div>
                            <div class="pop_value text-warp">{{ detailInfo.sampleUserName || '' }}</div>
                        </div>
                        <div class="pop_xhibit_item">
                            <div class="pop_label">邀约时间：</div>
                            <div class="pop_value text-warp">{{ detailInfo.sampleRequestTime || '' }}</div>
                        </div>
                        <div class="pop_xhibit_item">
                            <div class="pop_label">邀约数量：</div>
                            <div class="pop_value text-warp">{{ Number(detailInfo.sampleNum) || '' }}</div>
                        </div>
                        <div class="pop_xhibit_item" v-if="detailInfo.sampleStatus == 2">
                            <div class="pop_label">拒绝原因：</div>
                            <div class="pop_value text-warp">{{ detailInfo.sampleRemark || '' }}</div>
                        </div>
                        <div class="pop_xhibit_item" v-if="detailInfo.sampleStatus == 2">
                            <div class="pop_label">拒绝时间：</div>
                            <div class="pop_value text-warp">{{ detailInfo.refuseTime || '' }}</div>
                        </div>
                        <div class="pop_xhibit_item" v-if="detailInfo.sampleStatus == 3">
                            <div class="pop_label">入库数量：</div>
                            <div class="pop_value text-warp">{{ Number(detailInfo.inStockNum) || 0 }}</div>
                        </div>
                        <div class="pop_xhibit_item" v-if="detailInfo.sampleStatus == 3">
                            <div class="pop_label">入库时间：</div>
                            <div class="pop_value text-warp">{{ detailInfo.inStockTime || '' }}</div>
                        </div>
                    </div>
                </messageBox>
            </div>
        </div>
        <!-- 操作 -->
        <div class="buttonStatus" v-if="detailInfo.sampleStatus == 0 || detailInfo.sampleStatus == 1">
            <div class="grounding" v-if="detailInfo.sampleStatus == 0" @click="overlayShow = true" v-throttle:click>
                拒绝响应</div>
            <div class="groundings" v-if="detailInfo.sampleStatus == 0" @click="response" v-throttle:click>响应邀约
            </div>
            <div class="grounding" v-if="detailInfo.sampleStatus == 1 && detailInfo.isSkip == 0" @click="lookLogistics"
                v-throttle:click>
                查看物流</div>
            <div class="groundings" v-if="detailInfo.sampleStatus == 1" @click="okStorage" v-throttle:click>确认入库
            </div>
        </div>
        <van-overlay :show="overlayShow" @click="overlayShow = false" z-index="6001">
            <div class="wrapper" @click.stop>
                <div class="wrapper_div">
                    <van-image :src="colseImg" @click="overlayShow = false"></van-image>
                    <div class="title">请填写拒绝原因</div>
                    <van-form @submit="onSubmit">
                        <van-field maxlength="50" show-word-limit v-model="message" rows="6" label="" type="textarea"
                            placeholder="请输入，不超过50字符" :border="false"
                            :rules="[{ required: true, trigger: 'onBlur', message: '请输入' }]" />
                        <van-button class="button" :loading="loading" loading-text="执行中..." round block type="primary"
                            native-type="submit" v-throttle:click>
                            提交确认
                        </van-button>
                    </van-form>
                </div>
            </div>
        </van-overlay>
    </div>
</template>
<script setup lang="ts">
import { copyTextToClipboard } from '@/utils/index'
import { computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getEnvValue } from "@/utils/index";
import { shelvesStatusNameByIdss } from '@/utils/statusNameById'
import { showImagePreview, showFailToast, showSuccessToast } from "vant";
import { getById, refuseResPond } from '@/api/productHome/index'
import IsImgPdf from '@/components/isImgPdf/index.vue'
import mechanismCardNew from '@/views/operation/product/components/mechanismCardNew.vue'
import messageBox from '@/views/productDetail/components/messageBox.vue'
const route = useRoute();
const router = useRouter();
const detailInfo = ref<any>({});
const realSrcList = ref<string[]>([]);
const stockImageList = ref<string[]>([]);
const overlayShow = ref(false)
const voucherImageList = ref<string[]>([]);
const otherImageList = ref<string[]>([]);
const customsDeclarationImageList = ref<string[]>([]);
const customsInformationImageList = ref<string[]>([]);
const customsInspectionImageList = ref<string[]>([]);
const customsTestReportImgaeList = ref<string[]>([]);
const ticketSwiper = ref();
const message = ref('')
const loading = ref(false)
const errImg = new URL("@/assets/home/error.png", import.meta.url).href;
const colseImg = new URL("@/assets/approval/close.png", import.meta.url).href;

// 机制
const mechanismList = ref<any>({})
const hmMechanismsList1 = ref<any>({})
const hmMechanismsList2 = ref<any>({})


/** 图片放大 */
const enlargeImage = (data: any, index: number) => {
    showImagePreview({
        images: data,
        startPosition: index,
    });
};


/** 商品id */
const uniquekey = computed(() => {
    return route.params.id;
});
// 状态颜色区分
const isStatusColour = (type) => {
    if (type === '响应中') {
        return { "title_tag_lan": true }
    } else if (type === '已入库') {
        return { "title_tag_lv": true }
    } else if (type === '已拒绝') {
        return { "title_tag_hong": true }
    } else if (type === '已响应') {
        return { "title_tag_cheng": true }
    }
}


/** 多图片并发请求更改 */
const fetchImagesSequentially = async (real_src: any, list: any) => {
    for (const item of real_src) {
        if (item) {
            const url = getEnvValue("VITE_APP_PIC_URL") + item
            list.push(url);
        }
    }
};
/** 获取详情 */
const getDetail = async () => {
    const res = await getById({ id: uniquekey.value });
    detailInfo.value = res.data;
    console.log('detailInfo.value', detailInfo.value);

    if (res.data.hmStockMechanismsList.length) {
        mechanismList.value = res.data.hmStockMechanismsList[0]
        hmMechanismsList1.value = res.data.hmStockMechanismsList[1]
        hmMechanismsList2.value = res.data.hmStockMechanismsList[2]
    }
    if (res.data.productImage) {
        const real_src = res.data.productImage.split(",");
        fetchImagesSequentially(real_src, realSrcList.value);
    }

    if (res.data.stockImage) {
        const real_src = res.data.stockImage.split(",");
        fetchImagesSequentially(real_src, stockImageList.value);
    }
    if (res.data.supplierVo && res.data.supplierVo.businessImage) {
        detailInfo.value.businessImage = getEnvValue("VITE_APP_PIC_URL") + res.data.supplierVo.businessImage;
    }
    if (detailInfo.value.voucherImage) {
        const img1 = res.data.voucherImage.split(",");
        fetchImagesSequentially(img1, voucherImageList.value);
    }
    if (detailInfo.value.customsDeclarationImage) {
        const img2 = res.data.customsDeclarationImage.split(",");
        fetchImagesSequentially(img2, customsDeclarationImageList.value);
    }
    if (detailInfo.value.customsInformationImage) {
        const img3 = res.data.customsInformationImage.split(",");
        fetchImagesSequentially(img3, customsInformationImageList.value);
    }
    if (detailInfo.value.customsInspectionImage) {
        const img4 = res.data.customsInspectionImage.split(",");
        fetchImagesSequentially(img4, customsInspectionImageList.value);
    }
    if (detailInfo.value.customsTestReportImgae) {
        const img5 = res.data.customsTestReportImgae.split(",");
        fetchImagesSequentially(img5, customsTestReportImgaeList.value);
    }
    if (detailInfo.value.otherImage) {
        const img6 = res.data.otherImage.split(",");
        fetchImagesSequentially(img6, otherImageList.value);
    }
};
getDetail();

/** 复制 */
const copyClick = (title: string) => {
    copyTextToClipboard(title)
}
/** 响应邀约 */
const response = async () => {
    router.push({ path: `/sampleResponse/${detailInfo.value.id}`, query: { productId: detailInfo.value.productId } });
}

/** 返回区分不同地址 */
const handleLeft = () => {
    router.back();
};
/** 拒绝响应提交 */
const onSubmit = async () => {
    loading.value = true
    try {
        await refuseResPond({
            boList: [
                {
                    id: detailInfo.value.id,
                    productId: detailInfo.value.productId,
                }
            ],
            sampleRemark: message.value
        })
        showSuccessToast({ type: 'success', message: '拒绝成功' });
        loading.value = false
        overlayShow.value = false
        stockImageList.value = []
        realSrcList.value = []
        getDetail();
    } catch (error) {
        if (error == 'timeout') {
            showFailToast('拒绝失败');
        }
        loading.value = false
    }
    router.back()
}
const lookLogistics = () => {
    router.push({
        path: '/logisticsTrajectory',
        query: {
            id: detailInfo.value.id,
            shippingCompany: detailInfo.value.expressCompany,
            trackingNumber: detailInfo.value.expressNumber,
            logisticsType: ''
        }
    })
}
// 确认入库
const okStorage = () => {
    router.push({
        path: '/sampleStorage',
        query: {
            info: JSON.stringify(detailInfo.value)
        }
    })
}
</script>
<style lang="less" scoped>
:deep(.van-search__field) {
    background-color: #fff;
    border-radius: 20px;
    padding-left: 15px;
    padding-right: 60px;
}

.product_detail {
    width: 100%;
    height: calc(100vh);
    background-color: #f6faff;
    box-sizing: border-box;
    display: flex;
    flex-flow: column;

    .header {
        background: linear-gradient(#CDECFF 0%, #FFFFFF 70%);
        filter: blur(0px);
        height: 90px;
        padding-top: 44px;
        box-sizing: border-box;
        width: 100%;
        position: fixed;
        z-index: 6003;

        :deep(.van-icon-arrow-left) {
            color: #1a1b1c !important;
        }

        :deep(.van-nav-bar) {
            background: none !important;
        }

        :deep(.van-nav-bar__content) {
            background-color: transparent !important;
        }
    }

    .product_detail_scroll {
        flex: 1;
        min-height: 0;
        overflow-y: scroll;
        height: calc(100vh - 95px);
        width: 100%;
        padding-bottom: 10px;
        box-sizing: border-box;
    }

    .menu_cion {
        width: 14px;
        height: 14px;
        position: absolute;
        right: 15px;
    }

    .menu_cions {
        width: 14px;
        height: 14px;
        margin-right: 3px;
    }

    :deep(.van-nav-bar) {
        background-color: #1466ff;
        height: 46px !important;
        width: 100%;
        position: fixed !important;
    }

    :deep(.van-nav-bar__title) {
        color: #000;
    }

    :deep(.van-nav-bar__text) {
        color: #000;
    }

    :deep(.van-icon) {
        color: #000;
    }

    .product_detail_top {
        width: 100%;
        height: 50%;
        background-color: #fff;
        box-sizing: border-box;
        margin-top: 90px;

        .product_detail_top_img {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            position: relative;

            img {
                width: 375px;
                height: 320px;
            }

            :deep(.van-swipe) {
                width: 375px;
                height: 320px;

                .van-swipe-item {
                    width: 375px;
                    height: 320px;
                }
            }

            :deep(.van-image) {
                width: 375px;
                height: 320px;
            }
        }

        .product_detail_top_details {
            width: 100%;
            box-sizing: border-box;
            padding: 15px;

            .product_stylename {
                font-weight: 600;
                font-size: 18px;
                color: #1A1B1C;
                display: flex;
                align-items: center;

                .styleName {
                    width: 0;
                    flex: 1;
                    margin-left: 10px;
                }

                .product_mechanism {
                    width: 56px;
                    height: 22px;
                    background: linear-gradient(146deg, #0064FF 0%, #008FFF 100%);
                    border-radius: 5px;
                    font-weight: 500;
                    font-size: 12px;
                    color: #FFFFFF;
                    text-align: center;
                    line-height: 22px;
                }
            }

            .product_box {
                margin-top: 10px;
                position: relative;

                .product_fl_box {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .box_l {
                        display: flex;
                        align-items: center;
                        height: 30px;
                        background: #EBF4FF;
                        border-radius: 5px;
                        margin-right: 7px;

                        .l_title {
                            width: 85px;
                            height: 30px;
                            background: url("@/assets/newui/details/icon_kucunbianma@2x.png");
                            background-repeat: no-repeat;
                            background-size: 100% 100%;
                            font-weight: 500;
                            font-size: 14px;
                            color: #3F68DB;
                            line-height: 14px;
                            text-align: center;
                            line-height: 30px;

                            span {
                                display: inline-block;
                                transform: translateX(-4px);
                            }
                        }

                        .l_code {
                            font-weight: 500;
                            font-size: 14px;
                            color: #3F68DB;
                            line-height: 14px;
                            margin-left: 10px;
                            max-width: 70px;
                        }

                        .l_copy {
                            width: 15px;
                            height: 15px;
                            margin: 0 10px;
                            background: url("@/assets/newui/details/icon_kucunbianmacopy@2x.png");
                            background-repeat: no-repeat;
                            background-size: 100% 100%;
                        }
                    }

                    .box_r {
                        width: 0px;
                        flex: 1;
                        height: 30px;
                        background: #EBF4FF;
                        border-radius: 5px 0px 5px 5px;
                        text-align: center;
                        position: relative;
                        font-weight: 500;
                        font-size: 14px;
                        color: #3F68DB;
                        line-height: 30px;

                        .icon_69 {
                            position: absolute;
                            width: 49px;
                            height: 16px;
                            background: url("@/assets/newui/details/icon_69ma@2x.png");
                            background-repeat: no-repeat;
                            background-size: 100% 100%;
                            right: 0;
                            top: -16px;
                        }
                    }
                }
            }

            .product_ppbox {
                margin-top: 10px;
                display: flex;
                flex-wrap: wrap;
                gap: 10px;

                .pp_item {
                    height: 30px;
                    background: #F7F7F7;
                    border-radius: 5px;
                    font-weight: 500;
                    font-size: 14px;
                    color: #464E5D;
                    line-height: 30px;
                    padding: 0 10px;
                }
            }

            .product_gysbox {
                display: flex;
                align-items: center;
                margin-top: 10px;

                .gys_l {
                    height: 30px;
                    width: 0;
                    flex: 1;
                    display: flex;
                    align-items: center;
                    padding: 0 10px;
                    background: #FFE9E1;
                    border-radius: 5px;
                    font-weight: 500;
                    font-size: 14px;
                    color: #FF5A1A;
                    line-height: 14px;

                    .gys_img {
                        width: 12px;
                        height: 14px;
                        background: url("@/assets/newui/details/gys.svg");
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                        margin-right: 5px;
                    }
                }

                .gys_c {
                    width: 66px;
                    height: 30px;
                    border-radius: 5px;
                    font-weight: 500;
                    font-size: 14px;
                    line-height: 30px;
                    text-align: center;
                    margin-left: 10px;
                    background: #EBF4FF;
                    color: #0094FF;
                }
            }

            .product_ztbox {
                width: 345px;
                height: 65px;
                background: #F7F7F7;
                border-radius: 5px;
                margin-top: 10px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .line {
                    width: 1px;
                    height: 25px;
                    background-color: #ECECF2;
                }

                .product_users_item {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                    color: #8492AD;
                    line-height: 14px;
                    width: 0;
                    flex: 1;
                    text-align: center;

                    .product_users_text {
                        font-weight: 500;
                        font-size: 14px;
                        color: #1A1B1C;
                        line-height: 14px;
                        margin-top: 11px;
                    }
                }
            }

            .product_id {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #825C2A;
                line-height: 12px;
                margin-top: 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .produc_left {
                    width: 210px;
                    height: 20px;
                    background: linear-gradient(180deg, #FCF2DB 0%, #FCE7C9 100%);
                    border-radius: 5px;
                    padding: 0 5px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    box-sizing: border-box;

                    .copy {
                        width: 12px;
                        height: 12px;
                        background: url("@/assets/newui/details/icon_zongsefuzhi@2x.png");
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                    }
                }

                .coreName {
                    width: 0px;
                    flex: 1;
                    margin-left: 5px;
                    height: 20px;
                    background: linear-gradient(180deg, #FCF2DB 0%, #FCE7C9 100%);
                    border-radius: 5px;
                    align-items: center;
                    display: flex;

                    .goods_r_l {
                        width: 34px;
                        height: 20px;
                        border-radius: 5px;
                        border: 1px solid;
                        text-align: center;
                        line-height: 20px;
                    }

                    .goods_r_r {
                        width: 0;
                        flex: 1;
                        text-align: center;
                    }
                }

            }

            .product_ggbox {
                display: flex;
                margin-top: 10px;
                font-weight: 400;
                font-size: 14px;
                color: #464E5D;
                line-height: 20px;
                white-space: wrap;
                word-break: break-all;
                text-align: justify;

                .ggimg {
                    width: 14px;
                    height: 14px;
                    background: url("@/assets/newui/details/icon_guige.svg");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    margin-right: 10px;
                    transform: translateY(3px);
                    flex-shrink: 0;

                }

                .qunimg {
                    width: 14px;
                    height: 14px;
                    background: url("@/assets/newui/details/icon_duijiequnming.svg");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    margin-right: 10px;
                    transform: translateY(3px);
                    flex-shrink: 0;

                }
            }

        }


    }

    &_title {
        padding: 10px 15px 0px 15px;
        width: 100%;
        font-weight: 500;
        font-size: 16px;
        color: #1a1b1c;
    }

    &_bottom {
        width: 100%;
        border-radius: 3px;
        // height: calc(58vh - 85px);
        background-color: #fff;
        padding: 1px 15px 60px 12px;
        box-sizing: border-box;

        .tilte {
            display: inline-block;
            margin: 8px 0;
            font-weight: 400;
            font-size: 14px;
            color: #1a1b1c;
            padding-bottom: 5px;
        }

        .product_image {
            display: flex;
            align-items: center;
            // justify-content: space-between;
            width: 100%;
            margin-left: -10px;
            // margin-left: 10%;
            flex-wrap: wrap;

            .product_image_div {
                // margin-right: 5px;
            }
        }

        .vouche_image {
            width: 80%;
            margin-left: 10%;
        }
    }

    .buttonStatus {
        width: 100%;
        height: 84px;
        display: flex;
        line-height: 40px;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        box-sizing: border-box;
        padding: 0 15px;
        gap: 20px;
        box-shadow: 0px 0px 8px 0px rgba(189, 195, 204, 0.5);

        .grounding {
            width: 0;
            flex: 1;
            height: 44px;
            font-size: 16px;
            border-radius: 5px;
            line-height: 44px;
            border: 1px solid #0094FF;
            text-align: center;
            color: #009EFF;
            background-color: #fff;
        }

        .groundings {
            width: 0;
            flex: 1;
            height: 44px;
            background: linear-gradient(146deg, #0064FF 0%, #008FFF 100%);
            border-radius: 5px;
            font-weight: 500;
            font-size: 16px;
            color: #FFFFFF;
            line-height: 44px;
            text-align: center;
        }

    }

    :deep(.product_detail_top) {
        width: 100% !important;
        // width: 100%;
        // border: solid 1px black;
        // min-height: 570px;
        height: auto;
    }

    .product_detail_top_img {
        width: 375px;
        height: 320px;
    }

    .van-swipe-item {
        width: 375px !important;
        height: 320px !important;

        .van-image {
            width: 375px;
            height: 320px;
        }
    }

    .van-swipe {
        width: 375px;
        height: 320px;
    }

    .vouche_image {
        width: 100%;
        margin-left: -10px;
    }

    :deep(.van-nav-bar__text) {
        color: #0094ff !important;
    }
}

.tilte {
    display: inline-block;
    margin: 8px 0;
    font-weight: 400;
    font-size: 14px;
    color: #b8beca;
    padding-bottom: 5px;
}

.product_image {
    display: flex;
    align-items: center;
    // justify-content: space-between;
    width: 100%;
    // margin-left: 10%;
    flex-wrap: wrap;


}

// 多机制TOP图片
.mechanism_mall {
    position: absolute;
    right: 0;
    top: 35px;
    width: 70px;
    height: 41px;
    background: url("@/assets/newui/details/icon_duojizhi@2x.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.stock_box {
    position: absolute;
    left: 0;
    bottom: 0;
    font-weight: 500;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 14px;
    background: #000000aa;
    height: 30px;
    padding: 0 10px;
    display: flex;
    align-items: center;

    .line {
        width: 1px;
        height: 14px;
        background-color: #fff;
        margin: 0 10px;
    }
}

//轮播计数
.hmshop-custom-indicator {
    position: absolute;
    right: 0px;
    bottom: 0px;
    height: 30px;
    background: #000000aa;
    font-weight: 500;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 30px;
    font-style: normal;
    padding: 0 10px;
}

.text-el {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.style_y {
    background-color: #E7FDEE !important;
    color: #19D11B !important;
}

.style_n {
    background-color: #FDE7E7 !important;
    color: #FC2540 !important;
}

.mechanism_area {
    padding: 0 15px;
}

.pop_xhibit_item {
    padding: 10px 0;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    display: flex;


    .pop_label {
        width: 100%;
        flex: 3;
        color: #464E5D;
    }


    .pop_value {
        width: 0;
        flex: 5;
        color: #1A1B1C;
    }

    .pop_value_contract {
        display: flex;
        flex-wrap: wrap;

        div {
            margin-right: 9px;
            margin-bottom: 5px;
        }
    }

    .pop_values {
        padding-top: 10px;

        .mul_imags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;


        }

        .van-image {
            width: 90px;
            height: 90px;
        }
    }
}

.text-warp {
    word-break: break-all;
    text-align: justify;
}

.title_tag {
    padding: 5px 5px;
    border-radius: 2px;
    line-height: 12px;
    text-align: center;
    font-weight: 500;
    font-size: 12px;
    margin-left: 10px;
}

.title_tag_lan {
    background: #EBF4FF;
    color: #0094FF;
}

.title_tag_lv {
    background: #E7FDEE;
    color: #19D11B;
}

.title_tag_hong {
    background: #FDE7E7;
    color: #FC2540;
}

.title_tag_cheng {
    background: #FFE9E1;
    color: #FF5A1A;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .wrapper_div {
        width: 315px;
        background-color: #fff;
        border-radius: 5px;
        position: relative;

        :deep(.van-field__control) {
            background: #F6FAFF !important;
        }

        ::placeholder {
            font-size: 14px;
            color: #B8BECA;
        }

        .title {
            font-weight: 500;
            font-size: 16px;
            color: #1A1B1C;
            width: 100%;
            text-align: center;
            margin: 30px 0 20px 0;
        }

        .van-image {
            width: 10px;
            height: 10px;
            position: absolute;
            right: 18px;
            top: 18px;
        }

        :deep(.van-form) {
            min-height: 265px;
        }

        .button {
            color: #FFFFFF;
            font-size: 14px;
            width: 285px;
            height: 44px;
            background: #0094FF;
            border-radius: 23px;
            margin: auto;
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }
    }
}
</style>
